<template>
    <div class="main-w">
        <div class="tab">
            <ul v-for="(item,index) in tabList" :key="item">
                <li
                    :class="currentIndex==index?'hover':''"
                    :key="item"
                    @click="handleItem(index)"
                >{{item}}</li>
            </ul>
        </div>
        <Chart v-if="currentIndex === 0" />
        <Quotation v-if="currentIndex === 1" />
        <SyBottom />
    </div>
</template>
<script>
import Chart from './SingleStroke/chart.vue'
import Quotation from './SingleStroke/quotation.vue'
import SyBottom from './SingleStroke/sybottom.vue'
export default {
    name: 'SingleStroke',
    components: {
        Chart,
        Quotation,
        SyBottom,
    },
    data() {
        return {
            currentIndex: 0,
            tabList: ['分布实图', '行业视图'],
        }
    },
    mounted() {},
    methods: {
        handleItem(index) {
            this.currentIndex = index
        },
    },
}
</script>
<style lang="scss" scoped>
.main-w {
    width: 100%;
    overflow: hidden;
}
.tab {
    height: 31px;
    position: absolute;
    width: 200px;
    right: 10px;
    top: 10px;
    z-index: 88;
    ul {
        margin: 0;
        padding: 0;
        li {
            float: left;
            width: 85px;
            font-size: 10px;
            text-align: center;
            height: 28px;
            line-height: 28px;
            border: 1px solid #00796a;
            list-style-type: none;
            cursor: pointer;
            &.hover {
                background: #00796a;
                color: #fff;
                font-weight: bold;
            }
        }
    }
}
</style>